<template>
  <div>
     <!--  -->
     <div
      class="py-[40px]  pt-[150px] text-center relative"
    >
    <div class="colorbox3"></div>
    <div class="colorbox4"></div>
      <div class="w-[60%] mx-auto z-[1000] relative">
        <h1 class="h1style text-center">About Pink Star - Match, Chat, Connect</h1>
        <div class="text-white text-[19px] my-[20px]">
          Discover a platform where connections aren’t just random—they’re meaningful and fun. <br> Welcome to the brighter side of  1 on 1 live video chat platform. Welcome to Pink Star!
        </div>
        <div class="textstyle ">
          What sets us apart? It’s our focus on authenticity and safety. With intuitive matching, secure connections, and features that prioritize your comfort, Pink Star ensures every interaction is fun, respectful, and uniquely yours. Whether you're here to meet someone new, share your thoughts, or simply have fun, Pink Star makes every click count.Pink Star pairs you with like-minded individuals in a safe and inclusive space. Click, connect, and let the magic of genuine interaction unfold!
        </div>
      </div>
    </div>
      <!--  -->
    <div class="back text-center text-white py-[40px]">
      <div class="w-[60%] mx-auto">
        <h2 class="h1style">Global Stranger Video Chat</h2>
        <div class="textstyle">
          Ready to meet your next global friend via random video chatting? Expand your horizons like never before with Global Stranger Video Chat app. Connect with strangers from every continent, breaking barriers of language, culture, and geography. It’s more than just a chat—it's a passport to explore the diversity of human experiences. Learn about different traditions, share your culture, and form connections that cross borders. This is your chance to travel the world without leaving your room.
        </div>
        <NuxtLink class="button mx-auto mb-[30px]" :to="jump_url">
          <img src="../../assets/img/2.webp" class="w-[30px] mr-2" alt="" />
          Start Live Video Chat
        </NuxtLink>
        <img src="../../assets/img/about/2.webp" class="w-full" alt="" />
      </div>
    </div>
    <!--  -->
    <div class="back">
      <div
        class="w-[60%] mx-auto flex justify-between items-center pt-[50px] pb-[40px]"
      >
        <div class="w-[50%] text-white">
          <h2 class="h1style">1v1 Video Calls</h2>
          <div class="textstyle">
            Take your conversations to a deeper level with 1v1 video chat with privacy protection. Forget group distractions and engage in personal, one-on-one video chats that let you truly connect with the person on the other end.
            <br>
            <br>

If you’re making new friends, networking, or seeking a meaningful connection, these private calls on pinkstar camchat are designed to foster authentic communication. Dive into the world of personal interactions where every conversation matters.
              </div>
          <NuxtLink class="button" :to="jump_url">
            <img
              src="../../assets/img/home/3.webp"
              class="w-[20px] mr-2"
              alt=""
            />
            Download on Google Play
          </NuxtLink>
        </div>
        <div class="w-[49%] relative">
          <img src="../../assets/img/about/1.webp" class="w-full" alt="" />
        </div>
      </div>
    </div>
  
    <!--  -->
    <div class="back  py-[40px]">
      <div class="w-[60%] mx-auto flex justify-between items-center">
       
        <div class="w-[50%] relative flex justify-between h-[50vw] rounded-[30px] overflow-hidden">
          <div class="h-full w-[49%] bg1"></div>
          <div class="h-full w-[49%] bg2"></div>
        </div>
        <div class="w-[45%] text-white">
          <h2 class="h1style">Chat with Girls</h2>
          <div class="textstyle">
            Looking for friendly, engaging conversations? Video chat with women introduces you to amazing women from diverse backgrounds, each with unique stories to share.
            <br>
            <br>
            Whether you’re interested in casual chats, exploring different perspectives, or simply having fun, this feature brings you closer to genuine and meaningful interactions. Let your online video call be as vibrant and interesting as the people you meet.
          </div>
          <NuxtLink class="button" :to="jump_url">
          <img src="../../assets/img/2.webp" class="w-[30px] mr-2" alt="" />
          Start Live Video Chat
        </NuxtLink>
        </div>
      </div>
    </div>
    <!--  -->
     <div
      class="py-[40px] 2xl:pt-[150px] pt-[60px]"
      style="background: linear-gradient(180deg, #5a0c43 0%, #1a0453 100%)"
    >
      <div class="w-[60%] mx-auto">
        <h2 class="h1style text-center">Get Pinkstar APP</h2>
        <div class="textstyle text-left">
          Pink Star is designed to bring people closer through fun, spontaneous
          and meaningful video chatting. If you are fond of making new friends,
          sharing stories, or exploring different cultures, Pink Star is always
          your cherry pick to connect with strangers from around the globe.
          <br />
          <br />
          With a focus on authentic interactions and user safety, Pink Star
          creates a vibrant space where every chat is a new adventure. From
          quick matches to deep conversations, you’ll discover a world of
          connections waiting to be made—all at the tap of a button.
        </div>
        <NuxtLink class="button mx-auto" :to="jump_url">
          <img src="../../assets/img/2.webp" class="w-[30px] mr-2" alt="" />
          Start Live Video Chat
        </NuxtLink>
      </div>
    </div>
    <!--  -->
  </div>
</template>

<script setup>
var jump_url = useState("jump_url")

useSeoMeta({
  title: "About PinkStar | Fun Video Chat App Like Omegle for 1v1 Connections",
  description:
    "Discover how Pink Star randomchat is redefining online connections with secure, engaging 1v1 live video chats. Get fun and private video calls like Omegle.",
});
definePageMeta({
  pageTransition: {
    // name: 'rotate',
  }
})
</script>

<style lang="scss">
@keyframes animate1 {
  from {
    background-position-y: 0%;
  }
  100% {
    background-position-y: 1000px;
  }
}

@keyframes animate2 {
  from {
    background-position-y: 1000px;
  }
  100% {
    background-position-y: 0
  }
}

.bg1 {
  background-image: url(../../assets/img/about/3.webp);
  background-size: 100%;
  animation-name: animate1;
  animation-duration: 32s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.bg2 {
  background-image: url(../../assets/img/about/4.webp);
  background-size: 100%;
  animation-name: animate2;
  animation-duration: 32s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;

}

.colorbox3 {
  width: 30vw;
  height: 30vw;
  flex-shrink: 0;
  opacity: 0.9436;
  //   background: #622b6c;
  animation-name: anim1;
  animation-duration: 6s;
  filter: blur(15vw);
  position: absolute;
  animation-iteration-count: infinite;
  animation-direction:alternate;
  right: 10px;
  top: 10px;
}
.colorbox4 {
  width: 30vw;
  height: 30vw;
  flex-shrink: 0;
  opacity: 0.9436;
  animation-name: anim2;
  animation-duration: 10s;
  animation-direction:alternate;
  filter: blur(15vw);
  position: absolute;
  animation-iteration-count: infinite;
  left: 10px;
  top: 10px;
}

@keyframes anim1 {
  from {
    background: #622b6c;
  }
  50% {
    background: #290e7f;
  }
  100% {
    background: #622b6c;
  }
}
@keyframes anim2 {
  from {
    background: #290e7f;
  }
  50% {
    background: #622b6c;
  }
  50% {
    background: #290e7f;
  }
}

</style>
